// craco的配置文件  用于配置webpack
// 需求： 设置路径别名

// 导入path模块处理路径
const path = require('path')
const pxToViewport = require('postcss-px-to-viewport')

module.exports = {
  // 配置webpack
  webpack: {
    // 配置别名(让webpack去识别@)
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@scss': path.resolve(__dirname, 'src/assets/styles'),
    },
  },

  // postcss-px-to-viewport配置
  // react-scripts 4.0 的写法：
  style: {
    postcss: {
      plugins: [
        pxToViewport({
          // 视口宽度，就是基准尺寸，一般使用 375px（设计师的设计稿一般也按该宽度来设计）
          viewportWidth: 375,
        }),
      ],
    },
  },
}
